<style scoped lang="scss">
.dialog__body {
  background-color: #f3f3fa;
  border: 1px solid #bbbbbb;
  height: 55vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.button-group {
  margin: 20px 0 0 10px;
  display: flex;
  justify-content: flex-end;

  &__info {
    margin-right: 10px;
  }
}

.tab-group {
  margin: 10px 0 0 0;
  height: 100%;

  .tab-group-top-table {
    height: 50%;
    display: flex;
    margin: 0 10px;
  }

  .tab-group-bottom-table {
    height: 50%;
    margin-top: 80px;
  }

  ::v-deep .el-tabs__nav-wrap {
    padding: 10px 10px 0 10px;
  }

  ::v-deep .el-tabs__header {
    margin: 0;
  }

  ::v-deep .el-tabs__nav-scroll {
    background-color: #ffffff;
    margin-bottom: 5px;
  }

  ::v-deep .el-tabs__nav {
    margin-left: 10px;
  }

  ::v-deep .el-tabs__nav-wrap:after {
    height: 0;
  }

  ::v-deep .el-tab-pane {
    padding: 0 10px;
  }

  .form {
    margin-top: 8px;
  }

  ::v-deep .el-form-item {
    margin-right: 0 !important;
  }

  ::v-deep .el-form-item__label {
    position: absolute;
  }

  ::v-deep .el-form-item__content {
    width: 30%;
  }

  ::v-deep .el-select,
  .el-input__inner {
    width: 100%;
  }
}

::v-deep .el-table th.is-leaf {
  background-color: #ffffff !important;
}

.button-group__footer {
  display: flex;
  flex-direction: row-reverse;
  margin: 20px 10px 10px 0;
  &__cancel {
    margin: 0 0 0 10px;
  }
}
</style>
<template>
  <div class="dialog__body">
    <div class="button-group">
      <el-popover
        placement="right"
        title="属性生成"
        width="200"
        trigger="click"
      >
        <div>通过公式计算对字段的值进行处理</div>
        <mine-button slot="reference" type="primary" class="button-group__info"
          ><i class="iconfont icon-help-circle-line"></i>说明</mine-button
        >
      </el-popover>
    </div>
    <div class="tab-group">
      <div class="tab-group-top-table">
        <div style="width: 50%; padding-right: 5px">
          <div style="display: inline-block">函数</div>
          <el-input
            placeholder="请输入字段名"
            suffix-icon="el-icon-search"
            v-model="searchInput"
          >
          </el-input>
          <el-table
            class="table border-table"
            :data="tableData"
            style="width: 100%; display: inline-block"
            v-loading="loading"
            :height="tableHeight"
            ref="multipleTable"
          >
            <el-table-column label="字段名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="类型" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="标准化方式" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="值" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="移除" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 50%">
          <div style="display: inline-block">函数</div>
          <el-input
            placeholder="请输入字段名"
            suffix-icon="el-icon-search"
            v-model="searchInput"
          >
          </el-input>
          <el-table
            class="table border-table"
            :data="tableData"
            style="width: 100%; display: inline-block"
            v-loading="loading"
            :height="tableHeight"
            ref="multipleTable"
          >
            <el-table-column label="字段名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="类型" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="标准化方式" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="值" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="移除" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tab-group-bottom-table">
        <el-table
          class="table border-table"
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
          :height="tableHeight"
          ref="multipleTable"
        >
          <el-table-column label="字段名" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="类型" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="标准化方式" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="值" show-overflow-tooltip> </el-table-column>
          <el-table-column label="移除" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="button-group__footer">
      <mine-button type="primary" secondary class="button-group__footer__cancel"
        >取消</mine-button
      >
      <mine-button type="primary">确定</mine-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Attrs",
  data() {
    return {
      loading: false,
      tableData: [],
      form: {
        name: "",
        type: "",
      },
      searchInput: "",
    };
  },
  computed: {
    tableHeight: function () {
      return 0.2 * window.innerHeight + "px";
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>


